﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>图片中心点全屏缩放代码-新浪网</title>
    <script type="text/javascript" src="http://i1.sinaimg.cn/jslib/jquery-1.4.2.min.js"></script>
    <style>
        body{padding: 0;margin: 0;}
        #coverpage{width: 100%;height: 100%;z-index: 9999;background: #000;overflow: hidden;position: absolute;}
        #onepics{width: 100%;height: 100%;overflow: hidden;position: relative;}
        .onepic_wrap{width: 100%;height: 100%;overflow: hidden;display: block;position: relative;cursor: pointer;}
        .onepic_bg{position: absolute;left: 0;bottom: 0;height: 45px;width: 100%;color: #fff;background: rgba(0,0,0, 0.5);filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7f000000', EndColorStr='#7f000000');*zoom: 1;}
        :root .onepic_bg{filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');}
        .onepic_bg p{height: 45px;line-height: 45px;padding-left: 95px;font-size: 13px;color: #fff;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
    </style>
</head>
<body>
    <!-- cover begin -->
    <div id="coverpage">
        <div id="onepics"><div class="onepic_wrap"><img src="http://www.sinaimg.cn/dy/slidenews/1_ori/2014_38/43407_480207_848972.jpg" class="wrap_pic"></div></div>
        <!-- 文字介绍 start -->
        <div class="onepic_bg">
            <p id="onepic_sum">居民被迫撤离，主要州际高速路关闭。摄影：Darvi</p>
        </div>
        <!-- 文字介绍 end -->
    </div>

    <script type="text/javascript">
        //var original_width = 2100; 记得修改该值，记得修改该值，记得修改该值
        //var original_height = 1000; 记得修改该值，记得修改该值，记得修改该值

	  OnePicAction();

	  function OnePicAction() {

	      var original_width = 2100; //图片原始尺寸，编辑可手填
	      var original_height = 1000; //图片原始尺寸，编辑可手填

	      var win_height; //浏览器当前窗口可视区域高度
	      var win_width; //浏览器当前窗口可视区域宽度
	      var pic_width, pic_height, pic_left, pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距

          win_height = $(window).height(); //浏览器当前窗口可视区域高度
          win_width = $(window).width(); //浏览器当前窗口可视区域宽度

          //裁剪图片
          if(Math.ceil(win_height * original_width / original_height) < win_width ){
              pic_width = win_width ;
              pic_height = Math.ceil(win_width * original_height / original_width);
              pic_left = 0;
              pic_top = - Math.ceil((pic_height - win_height) / 2);
          }else{
              pic_height = win_height;
              pic_width = Math.ceil(win_height * original_width / original_height);
              pic_left = - Math.ceil((pic_width - win_width) / 2);
              pic_top = 0;
          }
          $("#onepics .wrap_pic").css("width",pic_width+"px").css("height",pic_height+"px").css("margin-top",pic_top+"px").css("margin-left",pic_left+"px");

      }
	  //浏览器大小变化时壹图处理
	  window.onresize = function(){
		  OnePicAction();
	  }
    </script>
</body>
</html>